<template>
  <div>
    <div class="bp1">
      <Header />
    </div>
    <div class="bp2">
      <div class="bp3">
        <div class="bp4">
          <el-input placeholder="请输入电影名称" v-model="mname" class="bp5" clearable> </el-input>
          <el-button type="primary" :icon="Search" class="bp6" @click="search">搜索电影</el-button>
          <el-table
            :data="tableData"
            :stripe="stripe"
            class="bp7"
            height="220px"
            :header-cell-style="{ textAlign: 'center' }"
            :cell-style="{ textAlign: 'center' }"
          >
            <el-table-column prop="pid" label="场次" width="60"> </el-table-column>
            <el-table-column prop="mname" label="电影名" width="70"> </el-table-column>
            <el-table-column prop="cname" label="放映厅" width="70"> </el-table-column>
            <el-table-column prop="playTime" label="放映时间" width="100"> </el-table-column>
            <el-table-column prop="duration" label="时长" width="60"> </el-table-column>
            <el-table-column prop="price" label="单价" width="60"> </el-table-column>
            <el-table-column label="操作" width="130">
              <template #default="scope">
                <el-button
                  type="warning"
                  icon="el-icon-mouse"
                  class="bp8"
                  @click="buy(scope.$index, scope.row)"
                  round
                  ><el-icon> <Goods /> </el-icon>立即购票</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <div class="bp9">
        <infor ref="child1" />
        <div class="bp10">
          <sit ref="child2" />
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import axios from 'axios'
import sit from '@/components/Client/buyCom/mobile/sitMobile'
import { ref, onMounted } from 'vue'
import router from '@/router'
import { Search } from '@element-plus/icons-vue'
import Header from '@/components/Client/GlobalCom/mobile/HeaderMobile.vue'
import infor from '@/components/Client/buyCom/mobile/inforMobile'
const isVip = ref('')
const stripe = ref(true)
const mname = ref('')
const tableData = ref()
const chosePlan = ref()
const child1 = ref()
const child2 = ref()
const init = () => {
  child1.value.chosePid = chosePlan.value.pid
  child1.value.choseMovieName = chosePlan.value.mname
  child1.value.choseCname = chosePlan.value.cname
  child1.value.chosePlayTime = chosePlan.value.playTime
  axios.get('api/plan/getPlanByMnameNow/' + chosePlan.value.mname).then((res1) => {
    child1.value.choseMovieName = res1.data[0].mname
    child1.value.choseMovieDir = res1.data[0].director
    child1.value.choseMovieRole = res1.data[0].mrole
    child1.value.choseMovieType = res1.data[0].mtype
    child1.value.choseMovieDuration = res1.data[0].duration
    child1.value.choseMovieDesn = res1.data[0].desn
    child1.value.choseMovieRate = res1.data[0].rate
    child1.value.imgUrl = require('@/assets/moviesPic/' + res1.data[0].pic)
  })
  axios.get('api/order/getOrderByPid/' + chosePlan.value.pid).then((res3) => {
    child2.value.yxz = res3.data
  })
  axios.get('api/cinema/getCinemaByCname/' + chosePlan.value.cname).then((res2) => {
    child2.value.choseCinema = res2.data
  })
}
onMounted(() => {
  if (document.documentElement.clientWidth > document.documentElement.clientHeight) {
    router.push('/Buy')
  }
  isVip.value = JSON.parse(sessionStorage.getItem('isVip'))
  if (JSON.parse(sessionStorage.getItem('chooseMovie')) === null) {
    axios.get('api/plan/getAllPlanNow').then((res) => {
      tableData.value = res.data
      chosePlan.value = res.data[0]
      child2.value.chosePlan = res.data[0]
      init()
    })
  } else {
    axios
      .get('api/plan/getPlanByMnameNow/' + JSON.parse(sessionStorage.getItem('chooseMovie')))
      .then((res) => {
        if (res.data.length === 0) {
          alert('此电影暂未开始放映，敬请期待！')
          sessionStorage.removeItem('chooseMovie')
          router.go(0)
        }
        tableData.value = res.data
        chosePlan.value = res.data[0]
        child2.value.chosePlan = res.data[0]
        init()
      })
  }
})
const buy = (i, row) => {
  child2.value.zxzj = []
  child2.value.zxzi = []
  child2.value.zj = 0
  child2.value.zsize = 0
  chosePlan.value = row
  child2.value.chosePlan = row
  init()
}
const search = () => {
  if (mname.value === '') {
    axios.get('api/plan/getAllPlanNow').then((res) => {
      tableData.value = res.data
      chosePlan.value = res.data[0]
      child2.value.chosePlan = res.data[0]
      init()
    })
  } else {
    axios.get('api/plan/getPlanByMnameNow/' + mname.value).then((res) => {
      console.log(res.data)
      if (res.data === '') {
        alert('没有找到到相关电影哦!')
      } else {
        tableData.value = res.data
        chosePlan.value = res.data[0]
        child2.value.chosePlan = res.data[0]
        init()
      }
    })
  }
}
</script>
<style lang="scss" scoped>
.bp1 {
  background-image: linear-gradient(to right, #434343 0%, black 100%);
}
.bp2 {
  width: 100%;
  height: 300px;
}
.bp3 {
  width: 100%;
  display: flex;
  float: left;
  height: 100%;
}
.bp4 {
  margin-top: 1%;
  margin-left: -5%;
  overflow: auto;
}
.bp5 {
  width: 200px;
}
.bp6 {
  margin-left: 1%;
  text-align: center;
}
.bp7 {
  width: 100%;
  margin-top: 1%;
  font-size: 10px;
}
.bp8 {
  width: 90px;
  align-content: center;
}
.bp9 {
  width: 100%;
  height: 100%;
}
.bp10 {
  margin-top: 6%;
}
</style>
